layui.use(['layer', "form", "laypage"], function() {
  let layer = layui.layer;
  let form = layui.form;
  let laypage = layui.laypage;


  // ***************************************************文章列表加载
  let data = {
    pagenum: 1, // 页码：现在是第几页
    pagesize: 5 // 每页显示多少条
  }

  function getList() {
    $.ajax({
      url: "/my/article/list",
      data: data,
      success: function(res) {
        if (res.status == 0) {
          let str = "";
          res.data.forEach(item => {
            str += `<tr>
                    <td>${item.title}</td>
                    <td>${item.cate_name}</td>
                    <td>${item.pub_date}</td>
                    <td>${item.state}</td>
                    <th>
                      <a href="../edit/edit.html?id=${item.Id}" class="layui-btn layui-btn-xs">编辑</a>
                      <button myid=${item.Id} type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </th>
                  </tr>`;
          });
          $("tbody").html(str);

          //
          laypage.render({
            elem: 'page',
            count: res.total,
            // 每页显示多少条
            limit: data.pagesize,

            // 页码：
            curr: data.pagenum,
            // 美化显示：按需
            limits: [2, 3, 5, 10],
            layout: ['prev', 'page', 'next', 'count', 'limit', 'skip'],

            // 当切换分页的时候：
            jump: function(obj, first) {
              // obj.curr:  可以获取切换后当前页码
              // obj.limit: 可以获取切换后当前显示条数

              // 1.first undefined是用户自己切换的！
              // 2.设置给全局 data 属性值；重新发出ajax请求！
              if (first == undefined) {
                data.pagenum = obj.curr;
                data.pagesize = obj.limit;

                // 重新发出ajax请求：
                getList();
              }
            }
          });
        }
      }
    });
  }
  getList();

  // ****************************************************筛选
  // 分类初始化数据
  $.ajax({
    url: "/my/article/cates",
    success: function(res) {
      if (res.status == 0) {

        let str = `<option value="">无</option>`;
        res.data.forEach(item => {
          str += `<option value="${item.Id}">${item.name}</option>`;
        });
        $("select").eq(0).html(str);

        form.render(); // form自己下拉选择框（单独渲染的）需要重新渲染
      }
    }
  });


  $("form").on("submit", function(e) {
    e.preventDefault();

    // 1.收集数据，设置给全局data
    let obj = form.val("box");
    data.cate_id = obj.category;
    data.state = obj.state;
    data.pagenum = 1; // 查询默认从第一页开始的！

    // 2.重新发出ajax请求
    getList();
  });


  // ****************************************************删除
  // 1.事件委托
  $("tbody").on("click", "button", function() {
    // 2.获取对应id；（得有id）
    let Id = $(this).attr("myid");

    // 3.询问是否可以删除
    layer.confirm('确认删除么?', { icon: 3, title: '删除提示' }, function(index) {

      $.ajax({
        url: "/my/article/delete/" + Id,
        success: function(res) {
          layer.msg(res.message);
          if (res.status == 0) {
            layer.close(index); // 关闭弹窗
            // 删除后页码回到第一页：
            data.pagenum = 1;
            getList(); //重新加载列表
          }
        }
      });


    });




  });




});